<script setup>
    import {computed} from "vue"
    // 父传子 接收父组件数据
    const props = defineProps({
        list: {
            type: Array,
            default: () => [],
        }
    })
    // 计算未完成的代办事项
    const unfinishedTaskCount = computed(() => {
        // 筛选出未完成的数组，求长度即可
        return props.list.filter((item) => !item.finished).length
    })
    // 子传父 删除所有已完成的任务（子组件通知即可）
    const emit = defineEmits()
    const startDelCompleted = () => {
        // 删除前询问
        if(window.confirm("请确认是否删除所有已完成的待办事项")) {
            emit("del_completed_task")
        }
    }
</script>
<template>
    <footer class="footer">
        <span class="todo-count"><strong>{{ unfinishedTaskCount }}</strong> item left</span>
        <ul class="filters">
            <li>
                <a href="#/" class="selected">All</a>   
            </li>
            <li>
                <a href="#/active">Active</a>
            </li>
            <li>
                <a href="#/completed">Completed</a>
            </li>
        </ul>
        <button class="clear-completed" @click="startDelCompleted">
            Clear completed
        </button>
    </footer>
</template>
